<template>
  <div id="app">
    <table class="tb">
      <tr>
        <th>编号</th>
        <th>品牌名称</th>
        <th>创立时间</th>
        <th>操作</th>
      </tr>
      <!-- 循环渲染的元素tr -->
      <tr v-for="(item,index) in arr" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.time}}</td>
            <td>
                <button @click="del(index)">删除</button>
            </td>
        </tr>
        <!-- v-if进行判断隐藏 -->
      <tr v-if="arr.length === 0">
        <!-- colspan合并表格 -->
        <td colspan="4">没有数据咯~</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
data(){
  return {
    arr:[
      {id:1,name:'宝马',time:'2018-01-01'},
      {id:2,name:'奔驰',time:'2018-05-01'},
      {id:3,name:'奥迪',time:'2018-10-01'}, 
      {id:4,name:'雷克萨斯',time:'2018-10-01'}, 
      {id:5,name:'英菲尼迪',time:'2018-10-30'}, 
      {id:6,name:'别克',time:'2019-10-01'}, 
    ]
  }
},
methods: {
  del(index){
    this.arr.splice(index, 1)
  }
}
}
</script>

<style>
  #app {
    width: 600px;
    margin: 10px auto;
  }
  
  .tb {
    border-collapse: collapse;
    width: 100%;
  }
  
  .tb th {
    background-color: #0094ff;
    color: white;
  }
  
  .tb td,
  .tb th {
    padding: 5px;
    border: 1px solid black;
    text-align: center;
  }
  
  .add {
    padding: 5px;
    border: 1px solid black;
    margin-bottom: 10px;
  }
  </style>
  







